<template>
    <div id="filter">
        <div class="filter-bar">
            <van-dropdown-menu class="ul">
                <van-dropdown-item class="li" v-model="value" :options="option1" />
                <van-dropdown-item class="li" v-model="value" :options="option2" />
                <van-dropdown-item class="li" v-model="value" :options="option3" />
                <van-dropdown-item class="li" v-model="value" :options="option4" />
                <van-dropdown-item class="li" v-model="value" :options="option5" />
            </van-dropdown-menu>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
    data(){
        return{
            value: 0,
            option1: [
                { text: '经验', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ],
            option2: [
                { text: '学历', value: 0 },
                { text: '好评排序', value: 1 },
                { text: '销量排序', value: 2 },
            ],
            option3: [
                { text: '薪资', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ],
            option4: [
                { text: '规模', value: 0 },
                { text: '好评排序', value: 1 },
                { text: '销量排序', value: 2 },
            ],
            option5: [
                { text: '融资', value: 0 },
                { text: '好评排序', value: 1 },
                { text: '销量排序', value: 2 },
            ]
        }
    },
    methods:{
        onConfirm() {
            // this.$refs.item.toggle();
        },
    },
    components:{
        // DropdownMenu,
        // DropdownItem
    }
}
</script>
<style lang="scss" scoped>
#filter{
    height:39px;
}
.filter-bar {
    border-top: solid 1px #ebebeb;
    border-bottom: solid 1px #ebebeb;
    .ul {
        display: flex;
        height: 37px;
        line-height: 37px;
    } 
}
.van-dropdown-menu__item /deep/ .van-dropdown-menu__title{
    font-family: arial,verdana,helvetica,Microsoft Yahei,sans-serif;
    -webkit-font-smoothing: antialiased;
    flex: 1;
    text-align: center;
    box-sizing: border-box;
    font-size: 12px;
    text-indent: -5px;
    color: #aaa;
}
.van-dropdown-menu__title::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-left: solid 1px #797979;
    border-top: solid 1px #797979;
    -webkit-transform: rotate(-135deg);
    position: relative;
    top: -3px;
    left: 5px;
    transition: all .3s ease 0s;
}
</style>